<template>
  <div class="m-payment clear-float">
    <div class="price">
      <!--为了解决空隙问题必须连在一起写-->
      <span>¥</span><span>999</span><span>起</span>
    </div>
    <button class="reserve">立即预定</button>
  </div>
</template>
<script>
  export default {
    name: 'm-payment',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-payment{
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    padding-left: 0.3rem;
    background-color: #FFF;
    border-top: 1px solid #D7D7D7;
    position: fixed;
    bottom:0;
    z-index: 999;
  }
  /*.clear-float:after{*/
    /*display: block;*/
    /*content: '';*/
    /*clear: both;*/
  /*}*/
  .price{
    float: left;
  }
  .price>span:first-child{
    font-size: 0.28rem;
    color: #FF6633;
  }
  .price>span:nth-child(2){
    font-size: 0.72rem;
    color: #FF6633;
    font-weight: 600;
  }
  .price>span:nth-child(3){
    /*font-family: .PingFang-SC-Regular;*/
    font-size: 0.24rem;
    color: #999;
  }
  .reserve{
    width: 2.6rem;
    height: 1.2rem;
    float: right;
    border:0;
    padding: 0;
    font-size: 0.36rem;
    background-color: #FF6633;
    color: #FFF;
    text-align: center;
    outline: none;
  }
</style>
